<!-- 每一项的值 -->
<template>
  <div class="item">
    <div v-if="props.name" class="name">{{ props.name }}</div>
    <div class="value">
      <span style="font-weight: 700; font-size: 28px;">{{ !props.value ? 0 : props.value }}</span>
      <span v-if="props.changeValue" :class="isUp ? 'red' : 'green'">
        {{ props.changeValue }}
        <el-icon v-if="isUp" style="margin-left: -2px">
          <CaretTop />
        </el-icon>
        <el-icon v-else style="margin-left: -2px">
          <CaretBottom />
        </el-icon>
      </span>
    </div>
  </div>
</template>

<script setup>
import { CaretTop, CaretBottom } from "@element-plus/icons-vue";
const props = defineProps({
  name: { type: String, default: "" },
  value: { type: String, default: "" },
  changeValue: { type: String, default: '' },
  isUp: { type: Boolean, default: false },
});
</script>

<style scoped>
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.name {
  color: #AEAEB2;

}

.value {
  font-size: 18px;
}

.green {
  padding-left: 3px;
  font-size: 14px;
  color: var(--el-color-success);
}

.red {
  padding-left: 3px;
  font-size: 14px;
  color: var(--el-color-danger);
}
</style>
